<template>
  <div class="index-root">
    <!-- 轮播图区域 -->
    <div class="swipe">
      <van-swipe :autoplay="3000" lazy-render indicator-color="#ccc">
        <van-swipe-item v-for="item in imageList" :key="item.id">
          <img :src="`${url+item.imgSrc}`" class="image">
        </van-swipe-item>
      </van-swipe>
      <search-header class="search-header"/>
    </div>
    <!-- 导航区 -->
    <div class="flex">
      <div class="flex-item" v-for="item in flexList" @click="goItem(item)">
        <img :src="item.img" alt class="flex-image">
        <span>{{item.title}}</span>
      </div>
    </div>
    <!-- 租房小组区域 -->
    <div class="book">
      <h3>租房小组</h3>
      <div>更多</div>
    </div>
    <!-- 九宫格区域 -->
    <van-grid :column-num="2">
      <van-grid-item v-for="item in bookList" :key="item.id">
        <div class="left">
          <h4>{{item.title}}</h4>
          <div>{{item.desc}}</div>
        </div>
        <div class="right">
          <img class="right-image" :src="`${url+item.imgSrc}`" alt>
        </div>
      </van-grid-item>
    </van-grid>
    <!-- news区域 -->
    <div class="news">
      <h3 class="news-header">最新资讯</h3>
      <news-item v-for="item in newsList" :data="item" :url="url"/>
    </div>
  </div>
</template>
<script>
import { request, url } from "../utils/index.js";
import nav1 from "../assets/images/nav-1.png";
import nav2 from "../assets/images/nav-2.png";
import nav3 from "../assets/images/nav-3.png";
import nav4 from "../assets/images/nav-4.png";
import newsItem from "../components/NewsItem.vue";
import searchHeader from "../components/SearchHeader.vue";
export default {
  components: {
    newsItem,
    searchHeader
  },
  data() {
    return {
      imageList: null,
      url: url,
      flexList: [
        {
          id: 1,
          path: "/home/list",
          title: "合租",
          img: nav1
        },
        {
          id: 2,
          path: "/home/list",
          title: "整租",
          img: nav2
        },
        {
          id: 3,
          path: "/map",
          title: "地图找房",
          img: nav3
        },
        {
          id: 4,
          path: "/rent/add",
          title: "去出租",
          img: nav4
        }
      ],
      bookList: [],
      newsList: []
    };
  },
  async created() {
    // 获取跑马灯图片
    const res = await request.get("/home/swiper");
    console.log(res.data.body);
    this.imageList = res.data.body;
    // 租房小组信息
    this.getBook();
    this.getNews();
  },
  methods: {
    goItem(item) {
      this.$router.push(item.path);
    },
    // 租房小组方法
    async getBook() {
      const res = await request.get("/home/groups");
      console.log(res.data.body);
      this.bookList = res.data.body;
    },
    // 最新资讯方法
    async getNews() {
      const res = await request.get("/home/news");
      this.newsList = res.data.body;
    }
  }
};
</script>
<style lang="less" scoped>
.swipe {
  position: relative;
  .search-header {
    position: absolute;
    left: 0;
    top: 12px;
  }
}
.index-root {
  padding-bottom: 50px;
}
.van-swipe,
.van-swipe-item,
.image {
  width: 100%;
  height: 212px;
}
/deep/ .van-swipe {
  .van-swipe__indicator {
    width: 8px;
    height: 8px;
    background: #cccccc;
  }
  .van-swipe__indicator--active {
    background: #888888;
  }
}
.flex {
  font-size: 15px;
  display: flex;
  height: 95px;
  padding: 15px 0;
  .flex-item {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: center;
    align-items: center;
    .flex-image {
      width: 50px;
      height: 50px;
    }
  }
}
.book {
  display: flex;
  height: 50px;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  padding: 0 10px;
  div {
    color: #7a7a7a;
  }
}
/deep/ .van-grid-item {
  .van-grid-item__content {
    font-size: 16px;
    margin: 0;
    padding: 0;
    height: 111px;
    display: flex;
    align-items: center;
    flex-direction: row;
    .left {
      height: 50px;
      font-size: 16px;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      margin-right: 10px;
      h4 {
        font-size: 16px;
      }
    }
    .right {
      height: 50px;
      .right-image {
        width: 50px;
        height: 50px;
      }
    }
  }
}
.news-header {
  border-top: 1px solid #cccccc;
  border-bottom: 1px solid #cccccc;
  height: 50px;
  line-height: 50px;
  padding-left: 10px;
}
</style>
